<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

	<!-- Basic Page Needs
  ================================================== -->
	<meta charset="utf-8" />
	<title>Imperial</title>
    <meta name="robots" content="index, follow" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
	<meta name="author" content="" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/resources/styles/style.css" />
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/resources/styles/skitter.styles.css" media="all" />
	<!-- CSS
  ================================================== -->
    <link rel="stylesheet" type="text/css" href="styles/style.css" />
    <link rel="stylesheet" type="text/css" href="styles/inner.css" />

	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css' />
    <link href='http://fonts.googleapis.com/css?family=Oswald:700,400' rel='stylesheet' type='text/css' />
	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- Favicons
	================================================== -->
	<link rel="shortcut icon" href="images/favicon.ico" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<body>
<div id="bodychild">
	<div id="outercontainer">
    	
        <!-- HEADER -->
          <%@ include file="common/header.jsp" %>
        <!-- END HEADER -->
        
        <!-- BEFORE CONTENT -->
        <div id="outerbeforecontent">
        	<div id="beforecontent">
            	<section id="beforethecontent">
					<div class="intro-l">
                    	<h1 class="pagetitle">Elements</h1><span class="pagedesc">this can be ur tagline or something you want</span>
                    </div>
                    <div class="intro-r">
                    	Donec consectetur libero ut tortor condimentum<br />
						<h2>Come &amp; Join Our Newsletter</h2>
                    </div>
                    <div class="clear"></div>
                </section>
            </div>
        </div>
        <!-- END BEFORE CONTENT -->
        
        <!-- MAIN CONTENT -->
        <div id="outermain">
        	<div id="maincontent">
        	<section id="mainthecontent">

				<article>
 					<div class="one_half firstcols">
                        <h4>Images in Paragraph</h4>
                        <p><img src="images/content/pic1.jpg" alt="" class="alignleft shadow-frame" />Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Sed placerat libero quis metus malesuada venenatis. Nulla facilisi. Duis condimentum molestie lacus.</p>
                        <p>Morbi a eros sed nisi laoreet.Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.laoreet molestie. Nulla facilisi. Duis condimentum molestie lacus ac tincidunt.Morbi a eros sed nisi laoreet molestie. Sed placerat libero quis metus malesuada venenatis. Proin vulputate, ligula id pellentesque laoreet, arcu odio tincidunt nunc, in dictum leo dui sed sapien. Cras rhoncus odio quis risus porta ullamcorper adipiscing nulla sodales. </p>
                        
                    </div>
                    <div class="one_half lastcols">
                        <h4>Tables</h4>
                        <table>
                        <thead>
                            <tr>
                                <th>Header 1</th>
                                <th>Header 2</th>
                                <th>Header 3</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Division 1</td>
                                <td>Division 2</td>
                                <td>Division 3</td>
                            </tr>
                            <tr class="even">
                                <td>Division 1</td>
                                <td>Division 2</td>
                                <td>Division 3</td>
                            </tr>
                            <tr>
                                <td>Division 1</td>
                                <td>Division 2</td>
                                <td>Division 3</td>
                            </tr>
                            <tr class="even">
                                <td>Division 1</td>
                                <td>Division 2</td>
                                <td>Division 3</td>
                            </tr>
                            <tr>
                                <td>Division 1</td>
                                <td>Division 2</td>
                                <td>Division 3</td>
                            </tr>
                            <tr>
                                <td>Division 1</td>
                                <td>Division 2</td>
                                <td>Division 3</td>
                            </tr>
                            <tr>
                                <td>Division 1</td>
                                <td>Division 2</td>
                                <td>Division 3</td>
                            </tr>
                            <tr>
                                <td>Division 1</td>
                                <td>Division 2</td>
                                <td>Division 3</td>
                            </tr>
                        </tbody>
                        </table>
                    </div>
                    <div class="clear"></div>
                    <div class="separator line"><div></div></div>
                    
                    <div class="one_half firstcols">
                        <h1>This is H1 tag</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id leo sem. In non eros viverra orci consequat sagittis sed sed lectus. Mauris tempus eleifend elit, ut fringilla nunc commodo sed. Nunc quam nunc, auctor id fringilla ut, faucibus euismod felis. Phasellus in est diam. Ut dolor neque, luctus ut laoreet non, dictum non diam. Donec lectus tortor, facilisis et dignissim vel, fringilla nec magna.</p>
                    </div>
                    <div class="one_half lastcols">
                        <h2>This is H2 tag</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id leo sem. In non eros viverra orci consequat sagittis sed sed lectus. Mauris tempus eleifend elit, ut fringilla nunc commodo sed. Nunc quam nunc, auctor id fringilla ut, faucibus euismod felis. Phasellus in est diam. Ut dolor neque, luctus ut laoreet non, dictum non diam. Donec lectus tortor, facilisis et dignissim vel, fringilla nec magna.</p>
                    </div>
                    
                    <div class="separator"><div></div></div>
                    
                    <div class="one_third firstcols">
                        <h3>This is H3 tag</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id leo sem. In non eros viverra orci consequat sagittis sed sed lectus. Mauris tempus eleifend elit, ut fringilla nunc commodo sed. Nunc quam nunc, auctor id fringilla ut, faucibus euismod felis. Phasellus in est diam. Ut dolor neque, luctus ut laoreet non, dictum non diam.</p>
                    </div>
                    <div class="one_third ">
                        <h4>This is H4 tag</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id leo sem. In non eros viverra orci consequat sagittis sed sed lectus. Mauris tempus eleifend elit, ut fringilla nunc commodo sed. Nunc quam nunc, auctor id fringilla ut, faucibus euismod felis. Phasellus in est diam. Ut dolor neque, luctus ut laoreet non, dictum non diam.</p>
                    </div>
                    <div class="one_third lastcols">
                        <h5>This is H5 tag</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id leo sem. In non eros viverra orci consequat sagittis sed sed lectus. Mauris tempus eleifend elit, ut fringilla nunc commodo sed. Nunc quam nunc, auctor id fringilla ut, faucibus euismod felis. Phasellus in est diam. Ut dolor neque, luctus ut laoreet non, dictum non diam.</p>
                    </div>
                    
                    <div class="separator"><div></div></div>
                    
                    <div class="one_fourth firstcols">
                        <h5>Content with dropcaps</h5>
                        <p><span class="dropcap1">A</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id leo sem. In non eros viverra orci consequat sagittis sed sed lectus. Mauris tempus eleifend elit, ut fringilla nunc commodo sed.</p>
                    </div>
                    <div class="one_fourth ">
                        <h5>Content with dropcaps</h5>
                        <p><span class="dropcap1">B</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id leo sem. In non eros viverra orci consequat sagittis sed sed lectus. Mauris tempus eleifend elit, ut fringilla nunc commodo sed.</p>
                    </div>
                    <div class="one_fourth ">
                        <h5>Content with dropcaps</h5>
                        <p><span class="dropcap1">C</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id leo sem. In non eros viverra orci consequat sagittis sed sed lectus. Mauris tempus eleifend elit, ut fringilla nunc commodo sed.</p>
                    </div>
                    <div class="one_fourth lastcols">
                        <h5>Content with dropcaps</h5>
                        <p><span class="dropcap1">D</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id leo sem. In non eros viverra orci consequat sagittis sed sed lectus. Mauris tempus eleifend elit, ut fringilla nunc commodo sed.</p>
                    </div>
                    <div class="clear"></div>
                    <div class="separator line"><div></div></div>
                    
                    <h4>Dropcaps</h4>
                    <p><span class="dropcap2">A</span>orem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. This is a blockquote. Aenean arcu elit, tristique semper pulvinar adipiscing. Donec faucibus. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. This is a blockquote. Aenean arcu elit, tristique semper pulvinar adipiscing. Donec faucibus. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
                    <div class="clear"></div>
                    <div class="separator line"><div></div></div>
                    
                    <div class="one_half firstcols">
                        <h4>jQuery  Tabs</h4>
                        <div class="tabcontainer">
                            <ul class="tabs">
                                <li><a href="#tab0">Tab1</a></li>
                                <li><a href="#tab1">Tab2</a></li>
                                <li><a href="#tab2">Tab3</a></li>
                            </ul>
                            <div id="tab-body">
                                <div id="tab0" class="tab-content">
                                <p>Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Sed placerat libero quis metus malesuada venenatis. Nulla facilisi malesuada.</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat rutrum luctus. Proin nisl augue, tempus quis lacinia at, ultrices eget sapien. Vestibulum at orci a eros molestie rutrum. Fusce interdum erat vel eros elementum vitae interdum massa varius. Morbi fermentum commodo nisi, id interdum mauris suscipit pellentesque. Morbi velit eros, accumsan ut faucibus at, viverra id mi. Nunc augue nisl, rutrum vitae luctus nec, lobortis sit amet diam.</p>
                                </div>
                                <div id="tab1" class="tab-content">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat rutrum luctus. Proin nisl augue, tempus quis lacinia at, ultrices eget sapien. Vestibulum at orci a eros molestie rutrum. Fusce interdum erat vel eros elementum vitae interdum massa varius. Morbi fermentum commodo nisi, id interdum mauris suscipit pellentesque. Morbi velit eros, accumsan ut faucibus at, viverra id mi. Nunc augue nisl, rutrum vitae luctus nec, lobortis sit amet diam. Proin porttitor semper sollicitudin. Donec mollis rhoncus turpis et rhoncus. In elit nisl, ultrices id mollis ut, dapibus eget nulla. Fusce laoreet neque ut purus faucibus ut condimentum purus condimentum. Vestibulum vel magna ligula, in tincidunt augue. Fusce sit amet neque ut neque vestibulum rhoncus in eu nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer interdum sapien facilisis odio fermentum tincidunt. Nullam a ante augue.
                                </div>
                                <div id="tab2" class="tab-content">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat rutrum luctus. Proin nisl augue, tempus quis lacinia at, ultrices eget sapien. Vestibulum at orci a eros molestie rutrum. Fusce interdum erat vel eros elementum vitae interdum massa varius. Morbi fermentum commodo nisi, id interdum mauris suscipit pellentesque. Morbi velit eros, accumsan ut faucibus at, viverra id mi. Nunc augue nisl, rutrum vitae luctus nec, lobortis sit amet diam. Proin porttitor semper sollicitudin. Donec mollis rhoncus turpis et rhoncus. In elit nisl, ultrices id mollis ut, dapibus eget nulla. Morbi nec magna erat, id tincidunt sapien. Morbi id porttitor lorem. In mi velit, viverra a congue et, congue sit amet nibh. Pellentesque a libero eget quam consequat condimentum eu eu est. Vestibulum at tellus eget massa accumsan volutpat. Suspendisse felis arcu, sagittis nec ultrices sit amet, faucibus a ante. Nunc et ante at ipsum iaculis porta eu quis augue. Praesent ultrices suscipit quam, vitae malesuada erat volutpat non. Sed ut tortor turpis, eu dignissim elit.
                                </div>
                            </div>
                        </div><!-- end tab container -->
                    </div>
                    <div class="one_half lastcols">
                        <h4>jQuery  Toggle</h4>
                        <div id="toggle">
                        
                            <h2 class="trigger first"><span>Excepteur sint occaecat</span></h2>
                            <div class="toggle_container">
                                <div class="block">
                                    <h5>Need a Website?</h5>
                                    <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.</p>
                                    <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.</p>
                                </div>
                            </div>
                        
                        
                            <h2 class="trigger"><span>Maecenas et lacus est, et congue velit</span></h2>
                            <div class="toggle_container">
                                <div class="block">
                                    <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.</p>
                                    <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.</p>
                                </div>
                            </div>
                        
                        
                            <h2 class="trigger"><span>Sed lobortis massa id magna</span></h2>
                            <div class="toggle_container">
                                <div class="block">
                                    <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.</p>
                                    <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.</p>
                                </div>
                            </div>
                        
                        
                            <h2 class="trigger"><span>Maecenas ultrices odio a orci dapibus</span></h2>
                            <div class="toggle_container">
                                <div class="block">
                                    <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.</p>
                                    <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.</p>
                                </div>
                            </div>
                        
                        
                            <h2 class="trigger"><span>Excepteur sint occaecat</span></h2>
                            <div class="toggle_container">
                                <div class="block">
                                    <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.</p>
                                    <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.</p>
                                </div>
                            </div>
                        
                        
                            <h2 class="trigger last"><span>Maecenas et lacus est, et congue velit</span></h2>
                            <div class="toggle_container">
                                <div class="block">
                                    <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.</p>
                                    <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.</p>
                                </div>
                            </div>
                        
                        </div><!-- end toggle -->
                    </div>
                    <div class="clear"></div>
                    <div class="separator line"><div></div></div>
                    
                    <h4>Pullquotes &amp; Blockquotes</h4>
                    <span class="pullquote-right">This is a pullquote right. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. </span>
                    <p>This is a blockquote. Donec iaculis mollis mauris. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Nullam dignissim convallis est.</p>
                    <p>Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
                    <span class="pullquote-left">This is pullquote left. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</span>
                    <p>Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p>
                    <p>Vivamus placerat cursus lorem, id mollis enim cursus quis. Pellentesque ac tortor ac quam hendrerit pharetra. Integer turpis eros, vulputate et pellentesque rhoncus, tincidunt sodales est. Aliquam volutpat egestas leo vitae pretium. Sed et urna nisi, aliquet faucibus magna.</p>
                    <blockquote><p>This is Blockquote. Sed iaculis, purus quis imperdiet laoreet, dui arcu vulputate urna, non molestie enim tellus a metus. Pellentesque ac tortor ac quam hendrerit pharetra.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est.</p>
                    </blockquote>
                    <p>Vivamus placerat cursus lorem, id mollis enim cursus quis. Pellentesque ac tortor ac quam hendrerit pharetra. Integer turpis eros, vulputate et pellentesque rhoncus, tincidunt sodales est. Aliquam volutpat egestas leo vitae pretium. Sed et urna nisi, aliquet faucibus magna.</p>
                    <div class="clear"></div>
                    <div class="separator line"><div></div></div>
                    
                    <h4>Highlight Text</h4>
                    <p><span class="highlight1">This is a highlight1 span class</span> Quisque gravida porttitor sodales. Mauris odio orci, vestibulum quis condimentum ac, vestibulum quis ipsum. Vivamus vulputate, metus non pulvinar commodo, enim odio tincidunt nunc, vel luctus mauris massa aliquet magna. Morbi eros enim, tempor scelerisque dignissim id, hendrerit pulvinar tortor.</p>
                    <p>Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. <span class="highlight2">This is a highlight2 span class.</span> tincidunt nec, gravida vehicula, nisl. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.</p>      
                </article>
         
                <div class="clear"></div>
            </section>
            </div>
        </div>
        <!-- END MAIN CONTENT -->
             
        <!-- FOOTER SIDEBAR -->
        <div id="outerfootersidebar">
        	<div id="footersidebarcontainer">
            	<footer id="footersidebar">
                
            	<div id="footcol1" class="footcol">
					<ul>
                    	<li class="widget-container">
                        	<h2 class="widget-title">Latest Post</h2>
                            <ul class="recenpost-widget">
                                <li><img src="images/content/rp1.jpg" alt="" />
                                    <h5><a href="#">Donec consectetur libero ut tortor condimentum eu egestas est viverra.</a></h5>
                                    <span class="smalldate">June 19, 2012, 3.00pm</span>
                                </li>
                                <li><img src="images/content/rp2.jpg" alt="" />
                                    <h5><a href="#">Pellentesque ac ante arcu. Mauris quis velit. eu egestas est viverra.</a></h5>
                                    <span class="smalldate">June 19, 2012, 3.00pm</span>
                                </li>
                            </ul>
                        </li>
                	</ul>
                </div>
            	<div id="footcol2" class="footcol">
                	<ul>
                        <li class="widget-container">
                            <h2 class="widget-title">Categories</h2>
                            <ul>
                                <li><a href="#">Photography Design</a></li>
                                <li><a href="#">Wordpress</a></li>
                                <li><a href="#">jQuery Tabs and Toogle</a></li>
                                <li><a href="#">Site Templates</a></li>
                                <li><a href="#">Joomla</a></li>
                                <li><a href="#">CSS3 &amp; HTML5</a></li>
                                <li><a href="#">Images</a></li>
                                <li><a href="#">News</a></li>
                                <li><a href="#">Uncategorized</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            	<div id="footcol3" class="footcol">
                	<ul>
                    	<li class="widget-container">
                        	<h2 class="widget-title">BlogRoll</h2>
                            <ul>
                                <li><a href="#">Aliquam luctus rhoncus eros, non malesuada nunc consectetur a. Donec tristique rhoncus </a></li>
                                <li><a href="#">Pellentesque ac ante arcu. Mauris quis nunc velit. Praesent hendrerit et.</a></li>
                            </ul>
                        </li>
                    	<li class="widget-container">
                        	<h2 class="widget-title">Archives</h2>
                            <ul>
                                <li><a href="#">April 2012</a></li>
                                <li><a href="#">May 2012</a></li>
                                <li><a href="#">June 2012</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            	<div id="footcol4" class="footcol">
					<ul>
                    	<li class="widget-container">
                        	<h2 class="widget-title">Gallery</h2>
                            <div id="flickr">
                            	<div class="flickr-img"><a href="#"><img src="images/content/g1.jpg" alt="" /></a></div>
                                <div class="flickr-img last"><a href="#"><img src="images/content/g2.jpg" alt="" /></a></div>
                                <div class="flickr-img"><a href="#"><img src="images/content/g3.jpg" alt="" /></a></div>
                                <div class="flickr-img last"><a href="#"><img src="images/content/g4.jpg" alt="" /></a></div>
                            </div>
                        </li>
                	</ul>
                </div>
                <div class="clear"></div>
                </footer>
            </div>
        </div>
        <!-- END FOOTER SIDEBAR -->
               
        <!-- FOOTER -->
        <div id="outerfooter">
        	<div id="footercontainer">
            	<footer id="footer">
                <ul id="footer-menu">
                	<li><a href="#">Home</a></li>   
                    <li><a href="#">About</a></li>   
                    <li><a href="#">Gallery</a></li>   
                    <li><a href="#">Portfolio</a></li>   
                    <li><a href="#">Blog</a></li>   
                    <li><a href="#">Contact</a></li>
                </ul>
                <div id="copyright">&copy; Copyright &copy; 2013.Company name All rights reserved.<a target="_blank" href="http://www.cssmoban.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></div>
                </footer>
            </div>
        </div>
        <!-- END FOOTER -->
        
        <div class="clear"></div>
	</div> <!-- end outercontainer -->
    
</div> <!-- end bodychild -->

<!-- Javascript
================================================== -->
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<!-- jQuery Superfish -->
<script type="text/javascript" src="js/hoverIntent.js"></script> 
<script type="text/javascript" src="js/superfish.js"></script> 
<script type="text/javascript" src="js/supersubs.js"></script>

<!-- Custom Script -->
<script type="text/javascript" src="js/custom.js"></script>


</body>
</html>
